<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素</title>
    <style>
        /* body{
            text-align: center; 实现里面所有的文本在其父容器中的水平居中
        } */
        div{
            display: block;
            width: 500px; height: 500px; background: yellow;
            text-align: center;/*实现里面所有的文本在其父容器中的水平居中*/
        }
        span{
            display: inline; /* 设置成行内元素 */
            background: red;
        }
    </style>
</head>
<body>
    <!-- 行内元素（display: inline）
            - 特点：
                1. 宽高由内容决定（一行显示多个元素） 
                2. 不能设置宽高
            -  行内元素（文本）如何实现水平居中？
                - 给其"外层容器"设置`text-align:center;`
     -->
    <div>
        <span>哈哈哈</span>
        <span>呵呵呵</span>
    </div>
     
    <!-- span、div无语义 -->
</body>
</html>